<template>
  <div>
      <div class="m-content"></div>
    
    <div class="m-content">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
      <el-row :gutter="20">
            <el-radio-group v-model="ruleForm.status">
    <el-radio :label="1">电子票</el-radio>
    <el-radio :label="2">实体票</el-radio>
    
  </el-radio-group>
  
          </el-row>

        <el-form-item label="展览名" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>

        <el-form-item label="地址" prop="description">
          <el-input type="textarea" v-model="ruleForm.description"></el-input>
        </el-form-item>
        <el-form-item label="详情内容" prop="contet">
          <el-input  type="textarea" v-model="ruleForm.contet"></el-input>
        </el-form-item>
        
         <el-form-item label="展览封面url" prop="picture">
          <el-input v-model="ruleForm.picture"></el-input>
           <el-image :src="ruleForm.picture" style="width: 10%; height: auto; float:left">
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
        </el-form-item>
                 <el-form-item label="轮播图1url" prop="picture">
          <el-input v-model="ruleForm.swiper"></el-input>
           <el-image :src="ruleForm.swiper" style="width: 10%; height: auto; float:left">
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
        </el-form-item>
         <el-form-item label="轮播图2url" prop="picture">
          <el-input v-model="ruleForm.swipera"></el-input>
           <el-image :src="ruleForm.swipera" style="width: 10%; height: auto; float:left">
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
        </el-form-item>
         <el-form-item label="轮播图3url" prop="picture">
          <el-input v-model="ruleForm.swiperb"></el-input>
           <el-image :src="ruleForm.swiperb" style="width: 10%; height: auto; float:left">
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
        </el-form-item>
        
                <el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">价格:<el-input-number v-model="ruleForm.price" :precision="2" :step="0.1" :max="999"></el-input-number></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">数量:<el-input-number v-model="ruleForm.num" @change="handleChange" :min="0" :max="9999" label="票务数量"></el-input-number></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"> <div class="block">
    <span class="demonstration">开始时间: </span>
    <el-form-item  prop="starttime" >
    <el-date-picker 
      v-model="ruleForm.starttime"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
    </el-form-item>
  </div></div></el-col>
          </el-row>
          
        <img>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button v-if="!ruleForm.id" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
      
      
      
    </div>
  </div>
</template>

<script>

export default {
  //import 引入的组件需要注入到对象中才能使用
  name: "tckedit.vue",
 
  data() {
    return {
      ruleForm: {
        id: "",
        title: "",
        description: "",
        contet: "",
        picture:"",
        swiper:"",
        swipera:"",
        swiperb:"",
        status:1,
        starttime:"",
        num:100,
        price:100,
        
      },
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入地址", trigger: "blur" },
        ],
        contet: [{ required: true, message: "请输入内容", trigger: "blur" }],
        picture: [{ required: true, message: "请输入url", trigger: "blur" }],
        starttime: [{ required: true, message: '请选择开始日期', trigger: 'blur' }],
        
      },
    };
  },
  methods: {
   submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            const _this = this
            this.$axios.post('/tick/edit', this.ruleForm, {
              headers: {
                "Authorization": localStorage.getItem("token")
              }
            }).then(res => {
              console.log(res)
              _this.$alert('操作成功', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                   this.$router.back();  
                }
              });

            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    created() {
      const blogId = this.$route.params.blogId
      
      console.log(blogId)
      const _this = this
      if(blogId) {//获取博客的id123213
      
        this.$axios.get('/ticks/' + blogId).then(res => {
          const blog = res.data.data
          console.log(blog)
          _this.ruleForm.id = blog.id
          _this.ruleForm.title = blog.title
          _this.ruleForm.description = blog.description
          _this.ruleForm.contet = blog.contet
          _this.ruleForm.picture=blog.picture
          _this.ruleForm=blog
          console.log(_this.ruleForm.contet)
        })
      }

  },
};
</script>
<style scoped>
.m-content {
  text-align: center;
}
</style>
